<template>
	<div class="app-container">
		<el-row style="display:flex;">
			<el-col :span="6">
				<el-table ref="roleTable" :data="planeList" @current-change="roleChange" highlight-current-row border style="width:255px">
					<el-table-column prop="p_id" label="" v-if="false" />
					<el-table-column prop="p_name" label="飞机型号" align="center" />
				</el-table>
			</el-col>
			<el-col :span="18">
				<el-row>
					<el-col>
						<el-button type="primary" style="width:126px" @click="drainSk('side')">侧面淋雨排空</el-button>
						<el-button type="primary" style="width:126px" @click="drainSk('topBig')">顶部淋雨排空</el-button>
						<el-button type="primary" style="width:126px" @click="drainSk('topSmall')">顶部浸雨排空</el-button>
						<el-button type="primary" style="width:126px" @click="replenishWater()">补水电子阀</el-button>
						<el-button type="primary" size="large" @click="openDialog(row,true)">自动清洗</el-button>
						<el-button type="primary" size="large" @click="openDialog(row,false)">手动清洗</el-button>
					</el-col>
					<el-col>
						<el-button type="primary" style="width:126px;margin-top:10px" @click="resetStyle()">重置</el-button>
						<el-button style="float:right;margin-right:50px;margin-top:5px" class="time" type="info">{{cleanTimeStr}}
						</el-button>
					</el-col>
					<el-col>
						<el-form :model="rainParams" :inline="true" style="margin-left:50px" label-width="145px">
							<el-form-item label="顶部淋雨压力(Mpa):">
								<el-input v-model="rainParams.topRainPressBig" size="mini" class="rainParamsInput" readonly>
								</el-input>
							</el-form-item>
							<el-form-item label="顶部浸雨压力(Mpa):">
								<el-input v-model="rainParams.topRainPressSmall" size="mini" class="rainParamsInput" readonly>
								</el-input>
							</el-form-item>
							<el-form-item label="侧面淋雨压力(Mpa):">
								<el-input v-model="rainParams.sideRainPress" size="mini" class="rainParamsInput" readonly>
								</el-input>
							</el-form-item>
							<el-form-item label="顶部淋雨流量(m3/h):">
								<el-input v-model="rainParams.topRainRateBig" size="mini" class="rainParamsInput" readonly></el-input>
							</el-form-item>
							<el-form-item label="顶部浸雨流量(m3/h):">
								<el-input v-model="rainParams.topRainRateSmall" size="mini" class="rainParamsInput" readonly></el-input>
							</el-form-item>
							<el-form-item label="侧面淋雨流量(m3/h):">
								<el-input v-model="rainParams.sideRainRate" size="mini" class="rainParamsInput" readonly></el-input>
							</el-form-item>
							<el-form-item label="水质PH:">
								<el-input v-model="rainParams.waterPH" size="mini" class="rainParamsInput" readonly></el-input>
							</el-form-item>
							<el-form-item label="环境温度(°c):">
								<el-input v-model="rainParams.environmentTemperature" size="mini" class="rainParamsInput" readonly>
								</el-input>
							</el-form-item>
							<el-form-item label="环境湿度(%):">
								<el-input v-model="rainParams.environmentHumidity" size="mini" class="rainParamsInput" readonly></el-input>
							</el-form-item>
							<el-form-item label="雨量计1(mm):">
								<el-input v-model="rainParams.rainGauge1" size="mini" class="rainParamsInput" readonly></el-input>
							</el-form-item>
							<el-form-item label="雨量计2(mm):">
								<el-input v-model="rainParams.rainGauge2" size="mini" class="rainParamsInput" readonly></el-input>
							</el-form-item>
							<el-form-item label="雨量计3(mm):">
								<el-input v-model="rainParams.rainGauge3" size="mini" class="rainParamsInput" readonly></el-input>
							</el-form-item>
							<el-form-item label="雨量计4(mm):">
								<el-input v-model="rainParams.rainGauge4" size="mini" class="rainParamsInput" readonly></el-input>
							</el-form-item>
							<el-form-item label="雨量计5(mm):">
								<el-input v-model="rainParams.rainGauge5" size="mini" class="rainParamsInput" readonly></el-input>
							</el-form-item>

						</el-form>
					</el-col>
				</el-row>
				<el-row>
					<el-col align="center">
						<img :src="J20" class="planeImage" style="">
						<div class="grid"></div>
						<div id="side26" class="aside" style="left:50px;top:150px">侧面1</div>
						<div id="side27" class="aside" style="left:50px;top:310px">侧面2</div>
						<div id="side28" class="aside" style="left:50px;top:470px">侧面3</div>
						<div id="side29" class="aside" style="left:50px;top:630px">侧面4</div>

						<div id="side30" class="aside" style="left:717px;top:150px">侧面5</div>
						<div id="side31" class="aside" style="left:717px;top:310px">侧面6</div>
						<div id="side32" class="aside" style="left:717px;top:470px">侧面7</div>
						<div id="side33" class="aside" style="left:717px;top:630px">侧面8</div>
					</el-col>
				</el-row>

			</el-col>
		</el-row>
		<el-dialog :title="dialogTitle" :visible="dialogVisible" width="70%" @close="dialogClose" :close-on-click-modal="false" center>
			<div class="checkDiv">
				<el-row>
					<el-col align="center">
						<el-form :model="cleanData" @submit.native.prevent>
							<el-form-item>
								<span style=" margin-left:10px; font-weight: 700;font-size: 14px;color: #606266;padding: 0 12px 0 0;">清洗分钟数:</span>
								<!-- 可以通过给input 添加oninput事件来实现输入纯数字和小数 -->
								<el-input v-model="cleanData.cleanMinutes" oninput="value=value.replace(/[^0-9.]/g,'')" size="mini" placeholder="请输入清洗分钟数" style="width:120px" maxlength="10"></el-input>
								<span style=" margin-left:10px; font-weight: 700;font-size: 14px;color: #606266;padding: 0 12px 0 0;">试验名称:</span>
								<el-input v-model="cleanData.testName" size="mini" placeholder="请输入试验名称" style="width:150px" maxlength="10"></el-input>
							</el-form-item>
							<el-form-item style="margin-bottom:5px">
								<el-button type="primary" id="side" style="width:126px" @click="openSk('side','',$event)" v-if="!auto">侧面淋雨开启
								</el-button>
								<el-button type="primary" id=topBIg style="width:126px" @click="openSk('topBig','',$event)" v-if="!auto">顶部淋雨开启
								</el-button>
								<el-button type="primary" id="topSmall" style="width:126px" @click="openSk('topSmall','',$event)" v-if="!auto">顶部浸雨开启
								</el-button>
								<el-button type="success" style="width:126px" @click="startClean(true)">开始清洗</el-button>
								<el-button type="danger" style="width:126px" @click="startClean(false)">停止清洗</el-button>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
				<el-row>
					<el-col :lg="5" :xs="24" align="middle">
						<h3>左侧喷头 </h3>
						<el-checkbox-group v-model="checkList">
							<div v-for="sprinkler in sprinklerLeftList" :key="sprinkler.label">
								<el-button v-if="!auto" size="mini" @click="updateSkPlace(sprinkler.value,-1,sprinklerLeftList)" circle style="margin-right:5px"><i class="el-icon-arrow-left"></i></el-button>
								<el-checkbox :label="sprinkler.value" @change="checked=>checkRow(checked, sprinkler.value)" border class="checkbox" style="width:120px" :disabled="auto">
									<span :id="sprinkler.value" class="checkboxClassDefault">
										{{sprinkler.label+'('+sprinkler.position+')'}}</span>
								</el-checkbox>
								<el-button v-if="!auto" circle size="mini" @click="updateSkPlace(sprinkler.value,1,sprinklerLeftList)" style="margin-left:5px"><i class="el-icon-arrow-right"></i></el-button>
							</div>
						</el-checkbox-group>
					</el-col>
					<el-col :lg="14" :xs="24" align="middle">
						<el-row>
							<h3>淋雨喷头 </h3>
							<el-checkbox-group v-model="checkList">
								<span style="padding:10px" v-for="sprinkler in sprinklerBigList" :key="sprinkler.label">
									<el-checkbox :label="sprinkler.value" @change="checked=>checkRow(checked, sprinkler.value)" border class="checkbox" :disabled="auto">
										<span :id="sprinkler.value" class="checkboxClassDefault"> {{sprinkler.label}}</span>
									</el-checkbox>
								</span>
							</el-checkbox-group>
						</el-row>
						<el-row>
							<h3>浸雨喷头</h3>
							<el-checkbox-group v-model="checkList">
								<span style="padding:10px">
									<el-checkbox v-for="sprinkler in sprinklersmallList" :key="sprinkler.label" :label="sprinkler.value" @change="checked=>checkRow(checked, sprinkler.value)" border class="checkbox" :disabled="auto">
										<span :id="sprinkler.value" class="checkboxClassDefault"> {{sprinkler.label}}</span>
									</el-checkbox>
								</span>
							</el-checkbox-group>
						</el-row>
					</el-col>
					<el-col :lg="5" :xs="24" align="middle">
						<h3>右侧喷头 </h3>
						<el-checkbox-group v-model="checkList">
							<div v-for="sprinkler in sprinklerRightList" :key="sprinkler.label">
								<el-button v-if="!auto" size="mini" @click="updateSkPlace(sprinkler.value,-1,sprinklerRightList)" circle style="margin-right:5px"><i class="el-icon-arrow-left"></i></el-button>
								<el-checkbox :label="sprinkler.value" @change="checked=>checkRow(checked, sprinkler.value)" border class="checkbox" style="width:120px" :disabled="auto">
									<span :id="sprinkler.value" class="checkboxClassDefault">
										{{sprinkler.label+'('+sprinkler.position+')'}}</span>
								</el-checkbox>
								<el-button v-if="!auto" circle size="mini" @click="updateSkPlace(sprinkler.value,1,sprinklerRightList)" style="margin-left:5px"><i class="el-icon-arrow-right"></i></el-button>
							</div>
						</el-checkbox-group>
					</el-col>
				</el-row>
			</div>
			<!-- <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="update()">确 定</el-button>
        </span>
      </template> -->
		</el-dialog>
	</div>
</template>  
<script>
import J20 from '@/assets/images/J-20.jpg'
import Grid from "@/libJs/Grid"
export default {
	name: "Dashboard",
	components: {},
	data() {
		return {
			J20: J20,
			backgroundDiv: {
				backgroundImage: 'url(' + J20 + ')'
			},
			planeList: [],
			cleanData: {
				cleanMinutes: "",
				testName: "",
			},
			cellStyle: { "background": "rgba(39,124,239, 0.3)", "line-height": "150px", 'color': '#ffffff' },
			cleaning: false, //清洗中
			cleanTime: 0,
			cleanTimeStr: "清洗时间:00时00分00秒",
			rainParams: {
				topRainPressBig: "22",
				topRainRateBig: "",
				topRainPressSmall: "",
				topRainRateSmall: "",
				sideRainPress: "",
				sideRainRate: "",
				waterPH: "",
				environmentTemperature: "",
				environmentHumidity: "",
				rainGauge1: "",
				rainGauge2: "",
				rainGauge3: "",
				rainGauge4: "",
				rainGauge5: "",
			},
			grid: "",
			dialogTitle: "",
			auto: true,
			row: null,
			dialogVisible: false,
			checkList: [],
			sprinklerList: [],
			sprinklerBigList: [],
			sprinklersmallList: [],
			sprinklerLeftList: [],
			sprinklerRightList: [],
			spanClass: false,
			pId: 0,
		};
	},
	watch: {},
	mounted: function () {

		//获取按钮权限(展示哪些按钮)
		this.buttens = this.$store.getters.buttens;
		this.getPlaneList();
		this.getSprinkerList();
		this.load()
		let _this = this;
		window.onbeforeunload = function (e) {
			if (_this.$route.name == "Dashboard") {
				e = e || window.event;
				// 兼容IE8和Firefox 4之前的版本
				if (e) {
					e.returnValue = '关闭页面前请先停止清洗';
				}
				//原生ajax请求
				// setTimeout(function () {
				//     if (confirm("关闭清洗")) {
				//       //次数必须使用同步请求axios无法实现
				//         //实例化XmlHttpRequest对象
				//         var xhr = new XMLHttpRequest();
				//         xhr.withCredentials = true;
				//         //使用POST方式请求指定网址的页面同步请求
				//         xhr.open("post", "https://localhost:44351/Group/List", false);
				//         // 设置请求头
				//         xhr.setRequestHeader('Content-Type', 'application/json; charset-UTF-8');
				//         xhr.setRequestHeader('x-token', _this.$store.getters.token)
				//         //发送空内容请求
				//         var requestData = {
				//             token: _this.$store.getters.token,
				//             sign: '',
				//             access_key: '',
				//             timeStemp: 0,
				//             body: {},
				//         }
				//         xhr.send(JSON.stringify(requestData));

				//         if (xhr.status === 200) {//200状态码表示正常
				//             alert('关闭成功');
				//         } else {
				//             alert("Error occurred:" + xhr.statusText);
				//         }
				//     }
				// }, 50)
				// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
				//从Firefox 4、 Chrome 51、Opera 38 和Safari 9.1开始，通用确认信息会代替事件返回的字符串。
				return '关闭页面前请先停止清洗';
			} else {
				window.onbeforeunload = null
			}
		};

	},
	methods: {
		load() {
			this.grid = new Grid({
				container: document.getElementsByClassName('grid')[0],// 必须项
				colCount: 5,
				rowCount: 5,
				width: 500,
				height: 750,
			})
		},
		getPlaneList() {
			this.baseRequest.Post("Plane/List", {}).then((res) => {
				this.planeList = res.bodyList;
				if (this.planeList.length > 0) {
					this.$refs.roleTable.setCurrentRow(this.planeList[0]); //选中第一行
				}
			});
		},
		startClean(clean) {
			if (
				this.cleanData.cleanMinutes === "" ||
				this.cleanData.cleanMinutes == undefined
			) {
				this.$msgbox.alert("请先输入清洗分钟数", { center: true });
				return;
			}
			if (
				this.cleanData.testName === "" ||
				this.cleanData.testName == undefined
			) {
				this.$msgbox.alert("请先输入试验名称", { center: true });
				return;
			}
			if (clean) {
				if (this.cleaning) {
					this.$msgbox.alert("正在清洗中请先停止", { center: true });
					return;
				}
				if (this.checkList.length <= 0) {
					this.$msgbox.alert("请先选择需要开启的喷头", { center: true });
					return;
				}
				var auto = ''
				if (this.auto) {
					auto = 'auto'
				}
				else {
					auto = 'noauto'
				}
				var that = this;
				this.baseRequest.Post("CleanWork/CleanStart", this.checkList, { auto: auto, pId: this.pId, testName: this.cleanData.testName })
					.then(res => {
						this.cleanTime = 0;
						this.timer = setInterval(() => {
							this.cleanTime++;
							this.baseRequest.Post("CleanWork/GetRainParams", {}, { pId: this.pId, testName: this.cleanData.testName })
								.then(res => {
									this.rainParams = res.Body;
								})
							this.cleanTimeStr = "清洗中:" + this.formateSeconds(this.cleanTime);
							if (this.cleanTime === this.cleanData.cleanMinutes * 60) {
								this.baseRequest.Post("CleanWork/CleanEnd", {}, { pId: this.pId, testName: this.cleanData.testName })
									.then(res => {
										this.sprinklerList.forEach(item => {
											if (item.sk_code < 26) {
												this.grid.setGridStyleByIndex(item.sk_code, { "background": "" });
												this.grid.getGrid(item.sk_code).innerText = "";
											}
											else {
												document.getElementById("side" + item.sk_code).style.backgroundColor = "";
												if (item.sk_code >= 26 && item.sk_code <= 29) {
													document.getElementById("side" + item.sk_code).style.left = "50px"
												}
												else {
													if (item.sk_code >= 30 && item.sk_code <= 33) {
														document.getElementById("side" + item.sk_code).style.left = "717px"
													}
												}
											}
										})

										this.$message({
											message: '清洗时间已到,结束清洗成功',
											type: "success",
										});
										this.cleaning = false;
									})
								clearInterval(this.timer);
								this.cleanTimeStr =
									"清洗完成:" + this.formateSeconds(this.cleanTime);
							}
						}, 1000);
						this.sprinklerList.forEach(item => {
							if (this.checkList.findIndex((value) => value == item.sk_id) > -1) {
								if (item.sk_code < 26) {
									this.grid.setGridStyleByIndex(item.sk_code, this.cellStyle);
									if (this.grid.getGrid(item.sk_code).innerText != undefined) {
										this.grid.getGrid(item.sk_code).innerText += item.sk_number;
									}
									else {
										this.grid.getGrid(item.sk_code).innerText = item.sk_number;
									}

								}
								else {

									let index = (this.sprinklerLeftList.concat(this.sprinklerRightList)).findIndex(value => value.value == item.sk_id);

									document.getElementById("side" + item.sk_code).style.backgroundColor = "rgba(8,33,193, 0.822)";
									document.getElementById("side" + item.sk_code).style.left = parseInt(document.getElementById("side" + item.sk_code).style.left) + (this.sprinklerLeftList.concat(this.sprinklerRightList))[index].position + "px";
								}
							}
						})

						this.$message({
							message: '开始清洗成功',
							type: "success",
						});
					})

			}
			if (!clean) {
				this.cleanTimeStr = "清洗结束:" + this.formateSeconds(this.cleanTime);
				clearInterval(this.timer);
				this.baseRequest.Post("CleanWork/CleanEnd", {}, { pId: this.pId, testName: this.cleanData.testName })
					.then(res => {
						this.sprinklerList.forEach(item => {
							if (item.sk_code < 26) {
								this.grid.setGridStyleByIndex(item.sk_code, { "background": "" });
								this.grid.getGrid(item.sk_code).innerText = "";
							}
							else {
								document.getElementById("side" + item.sk_code).style.backgroundColor = "";
								if (item.sk_code >= 26 && item.sk_code <= 29) {
									document.getElementById("side" + item.sk_code).style.left = "50px"
								}
								else {
									if (item.sk_code >= 30 && item.sk_code <= 33) {
										document.getElementById("side" + item.sk_code).style.left = "717px"
									}
								}
							}
						})
						this.$message({
							message: '结束清洗成功',
							type: "success",
						});
					})
			}
			this.cleaning = clean;
		},
		formateSeconds(endTime) {
			let secondTime = parseInt(endTime); //将传入的秒的值转化为Number
			let min = 0; // 初始化分
			let h = 0; // 初始化小时
			let result = "";
			if (secondTime > 60) {
				//如果秒数大于60，将秒数转换成整数
				min = parseInt(secondTime / 60); //获取分钟，除以60取整数，得到整数分钟
				secondTime = parseInt(secondTime % 60); //获取秒数，秒数取佘，得到整数秒数
				if (min > 60) {
					//如果分钟大于60，将分钟转换成小时
					h = parseInt(min / 60); //获取小时，获取分钟除以60，得到整数小时
					min = parseInt(min % 60); //获取小时后取佘的分，获取分钟除以60取佘的分
				}
			}
			result = `${h.toString().padStart(2, "0")}时${min
				.toString()
				.padStart(2, "0")}分${secondTime.toString().padStart(2, "0")}秒`;
			return result;
		},
		checkRow(checked, value) {
			if (checked) {
				document.getElementById(value).className = "checkboxClass";
			} else {
				document.getElementById(value).className = "checkboxClassDefault";
			}
		},
		replenishWater() {
			this.baseRequest.Post("CleanWork/ReplenishWater", {}, { pId: this.pId, testName: this.cleanData.testName })
				.then(res => {
					this.$message({
						message: '补水开启成功',
						type: "success",
					});
				})
		},
		drainSk(skGroup) {
			this.baseRequest.Post("CleanWork/DrainSk", {}, { skGroup: skGroup, pId: this.pId, testName: this.cleanData.testName })
				.then(res => {
					var message = ''
					if (skGroup == 'side') {
						message = '侧面排空成功'
					}
					if (skGroup == 'topBig') {
						message = '顶部淋雨排空成功'
					}
					if (skGroup == 'topSmall') {
						message = '顶部浸雨排空成功'
					}
					this.$message({
						message: message,
						type: "success",
					});
				})
		},
		openSk(skGroup, skId, event) {
			var skIdList = [];
			if (skGroup == "side" && event.target.innerText == "侧面淋雨开启") {
				this.sprinklerLeftList
					.concat(this.sprinklerRightList)
					.forEach((item) => {
						if (
							this.checkList.findIndex((value) => value == item.value) <= -1
						) {
							this.checkList.push(item.value);
						}
					});
				if (this.cleaning == true) {
					this.sprinklerLeftList.concat(this.sprinklerRightList).forEach(item => {
						skIdList.push(item.value)
					})
					this.baseRequest.Post("CleanWork/CleanStartSk", skIdList, { pId: this.pId, testName: this.cleanData.testName })
						.then(res => {
							this.$message({
								message: '侧面淋雨开启成功',
								type: "success",
							});
						})
				}
				event.target.innerText = "侧面淋雨关闭";
			} else if (skGroup == "side" && event.target.innerText == "侧面淋雨关闭") {
				this.sprinklerLeftList
					.concat(this.sprinklerRightList)
					.forEach((item) => {
						this.checkList.splice(
							this.checkList.findIndex((value) => value == item.value),
							1
						);
						document.getElementById(item.value).className =
							"checkboxClassDefault";
					});
				if (this.cleaning == true) {
					this.sprinklerLeftList.concat(this.sprinklerRightList).forEach(item => {
						skIdList.push(item.value)
					})
					this.baseRequest.Post("CleanWork/CleanEndSk", skIdList, { pId: this.pId, testName: this.cleanData.testName })
						.then(res => {
							this.$message({
								message: '侧面淋雨关闭成功',
								type: "success",
							});
						})
				}
				event.target.innerText = "侧面淋雨开启";
			}
			if (skGroup == "topBig" && event.target.innerText == "顶部淋雨开启") {

				this.sprinklerBigList.forEach((item) => {
					if (
						this.checkList.findIndex((value) => value == item.value) <= -1
					) {
						this.checkList.push(item.value);
					}
				});
				if (this.cleaning == true) {
					this.sprinklerBigList.forEach(item => {
						skIdList.push(item.value)
					})
					this.baseRequest.Post("CleanWork/CleanStartSk", skIdList, { pId: this.pId, testName: this.cleanData.testName })
						.then(res => {
							this.$message({
								message: '顶部淋雨开启成功',
								type: "success",
							});
						})
				}
				event.target.innerText = "顶部淋雨关闭";
			} else if (
				skGroup == "topBig" &&
				event.target.innerText == "顶部淋雨关闭"
			) {

				this.sprinklerBigList.forEach((item) => {
					this.checkList.splice(
						this.checkList.findIndex((value) => value == item.value),
						1
					);
					document.getElementById(item.value).className =
						"checkboxClassDefault";
				});
				if (this.cleaning == true) {
					this.sprinklerBigList.forEach(item => {
						skIdList.push(item.value)
					})
					this.baseRequest.Post("CleanWork/CleanEndSk", skIdList, { pId: this.pId, testName: this.cleanData.testName })
						.then(res => {
							this.$message({
								message: '顶部淋雨关闭成功',
								type: "success",
							});
						})
				}
				event.target.innerText = "顶部淋雨开启";
			}
			if (skGroup == "topSmall" && event.target.innerText == "顶部浸雨开启") {

				this.sprinklersmallList.forEach((item) => {
					if (
						this.checkList.findIndex((value) => value == item.value) <= -1) {
						this.checkList.push(item.value);
					}
				});
				if (this.cleaning == true) {
					this.sprinklersmallList.forEach(item => {
						skIdList.push(item.value)
					})
					this.baseRequest.Post("CleanWork/CleanStartSk", skIdList, { pId: this.pId, testName: this.cleanData.testName })
						.then(res => {
							this.$message({
								message: '顶部浸雨开启成功',
								type: "success",
							});
						})
				}
				event.target.innerText = "顶部浸雨关闭";
			} else if (
				skGroup == "topSmall" &&
				event.target.innerText == "顶部浸雨关闭"
			) {
				this.sprinklersmallList.forEach((item) => {
					this.checkList.splice(this.checkList.findIndex((value) => value == item.value), 1);
					document.getElementById(item.value).className =
						"checkboxClassDefault";
				});
				if (this.cleaning == true) {
					this.sprinklersmallList.forEach(item => {
						skIdList.push(item.value)
					})
					this.baseRequest.Post("CleanWork/CleanEndSk", skIdList, { pId: this.pId, testName: this.cleanData.testName })
						.then(res => {
							this.$message({
								message: '顶部浸雨关闭成功',
								type: "success",
							});
						})
				}
				event.target.innerText = "顶部浸雨开启";
			}
			this.checkList.forEach((item) => {
				document.getElementById(item).className = "checkboxClass";
			});
		},
		updateSkPlace(skId, position, skList) {
			this.baseRequest.Post("CleanWork/UpdateSkPosition", {}, { skId: skId, position: position, pId: this.pId, testName: this.cleanData.testName })
				.then((res) => {
					console.log(skList)
					console.log(this.sprinklerList)
					skList.forEach((item) => {
						if (item.value == skId) {
							item.position = item.position + position;
							if (this.sprinklerList.findIndex((value) => value.sk_id == item.value) > -1) {
								let index = this.sprinklerList.findIndex((value) => value.sk_id == item.value)
								document.getElementById("side" + this.sprinklerList[index].sk_code).style.left = (parseInt(document.getElementById("side" + this.sprinklerList[index].sk_code).style.left) + position) + "px"
							}

						}
					});
					var message = "移动成功";
					if (position > 0) {
						message = "右移成功";
					} else {
						message = "左移成功";
					}
					this.$message({
						message: message,
						type: "success",
					});
				})
		},
		//重置飞机图片喷头 样式和选中
		resetStyle() {
			if (this.cleaning) {
				alert("清洗中不能重置")
				return
			}

			//按钮样式设为默认
			this.checkList.forEach((item) => {
				document.getElementById(item).className = "checkboxClassDefault";
			});
			//重置选中checkbox
			this.checkList = [];
			//重置顶部 侧面按钮关闭
			if (!this.auto) {
				document.getElementById("side").innerText = "侧面淋雨开启"
				document.getElementById("topBIg").innerText = "顶部淋雨开启"
				document.getElementById("topSmall").innerText = "顶部浸雨开启"
			}

			//恢复默认样式
			this.sprinklerList.forEach(item => {
				if (item.sk_code < 26) {
					this.grid.setGridStyleByIndex(item.sk_code, { "background": "" });
					this.grid.getGrid(item.sk_code).innerText = "";
				}
				else {
					document.getElementById("side" + item.sk_code).style.backgroundColor = "";
					if (item.sk_code >= 26 && item.sk_code <= 29) {
						document.getElementById("side" + item.sk_code).style.left = "50px"
					}
					else {
						if (item.sk_code >= 30 && item.sk_code <= 33) {
							document.getElementById("side" + item.sk_code).style.left = "717px"
						}
					}
				}
			})
		},
		dialogClose() {
			//恢复默认样式
			this.sprinklerList.forEach(item => {
				if (item.sk_code < 26) {
					this.grid.setGridStyleByIndex(item.sk_code, { "background": "" });
					this.grid.getGrid(item.sk_code).innerText = "";
				}
				else {
					document.getElementById("side" + item.sk_code).style.backgroundColor = "";
					if (item.sk_code >= 26 && item.sk_code <= 29) {
						document.getElementById("side" + item.sk_code).style.left = "50px"
					}
					else {
						if (item.sk_code >= 30 && item.sk_code <= 33) {
							document.getElementById("side" + item.sk_code).style.left = "717px"
						}
					}
				}
			})

			//设置已选中的喷头图形样式
			this.sprinklerList.forEach(item => {
				if (this.checkList.findIndex((value) => value == item.sk_id) > -1) {
					if (item.sk_code < 26) {
						this.grid.setGridStyleByIndex(item.sk_code, this.cellStyle);
						if (this.grid.getGrid(item.sk_code).innerText != undefined) {
							this.grid.getGrid(item.sk_code).innerText += item.sk_number;
						}
						else {
							this.grid.getGrid(item.sk_code).innerText = item.sk_number;
						}

					}
					else {

						let index = (this.sprinklerLeftList.concat(this.sprinklerRightList)).findIndex(value => value.value == item.sk_id);

						document.getElementById("side" + item.sk_code).style.backgroundColor = "rgba(8,33,193, 0.822)";
						document.getElementById("side" + item.sk_code).style.left = parseInt(document.getElementById("side" + item.sk_code).style.left) + (this.sprinklerLeftList.concat(this.sprinklerRightList))[index].position + "px";
					}
				}
			})
			// if (this.cleaning) {
			// 	this.$msgbox.alert("请先停止清洗后关闭界面", { center: true });
			// 	return;
			// }
			this.dialogVisible = false;
		},
		openDialog(row, auto) {
			this.auto = auto;

			this.pId = row.p_id;
			if (auto) {
				//样式设为默认
				this.checkList.forEach((item) => {
					document.getElementById(item).className = "checkboxClassDefault";
				});
				//重置选中checkbox
				this.checkList = [];
				this.dialogTitle = "自动清洗" + '(' + row.p_name + ")";
				this.baseRequest
					.Post("CleanPlane/List", {}, { pId: row.p_id })
					.then((res) => {
						res.bodyList.forEach((item) => {
							if (item.c_state == 1) {
								this.checkList.push(item.sk_id);
								//给选中的喷头添加样式
								document.getElementById(item.sk_id).className = "checkboxClass";
							}
							this.sprinklerLeftList
								.concat(this.sprinklerRightList)
								.forEach((itemp) => {
									if (itemp.value == item.sk_id) {
										itemp.position = item.sk_level_space;
									}
								});
						});
					});
			} else {
				this.dialogTitle = "手动清洗" + '(' + row.p_name + ")";
				this.sprinklerList.forEach((item) => {
					if (item.sk_code >= 26 && item.sk_code <= 29) {
						let index = (this.sprinklerLeftList.concat(this.sprinklerRightList)).findIndex(value => value.value == item.sk_id);
						(this.sprinklerLeftList.concat(this.sprinklerRightList))[index].position = parseInt(document.getElementById("side" + item.sk_code).style.left) - 50
					}
					else if (item.sk_code >= 30 && item.sk_code <= 33) {
						let index = this.sprinklerLeftList.concat(this.sprinklerRightList).findIndex(value => value.value == item.sk_id);
						(this.sprinklerLeftList.concat(this.sprinklerRightList))[index].position = parseInt(document.getElementById("side" + item.sk_code).style.left) - 717
					}

				});
			}
			this.dialogVisible = true;
		},
		getSprinkerList() {
			this.baseRequest.Post("Sprinkler/List", {}).then((res) => {
				this.sprinklerList = res.bodyList;
				res.bodyList.forEach((item) => {
					var option = { label: "", value: "", sk_type: "", position: 0 };
					option.label = item.sk_number;
					option.value = item.sk_id;

					if (item.sk_type == "levelLeft") {
						this.sprinklerLeftList.push(option);
					}
					if (item.sk_type == "levelRight") {
						this.sprinklerRightList.push(option);
					}
					if (item.sk_type == "verticalSmall") {
						this.sprinklersmallList.push(option);
					}
					if (item.sk_type == "verticalBig") {
						this.sprinklerBigList.push(option);
					}
				});
			});
		},
		roleChange(row) {
			this.row = row;
			this.$message({
				message: "已选飞机型号:" + row.p_name,
				type: "success",
			});
		},

		//切换选中行触发
		Choose(row) { },
		//勾选行事件
		SelectionChange(rows) {
			this.rows = rows;
		},
	},
};
</script>
<style lang="scss">
.el-form-item {
	margin-bottom: 5px;
}
.checkbox {
	margin-top: 10px;
	width: 100px;
	margin-right: 5px;
}
.checkbox.is-bordered.is-checked {
	background-color: #409eff;
}
//多选框选中的默认字体颜色
.checkboxClass {
	color: #fff;
}
//多选框的默认字体颜色
.checkboxClassDefault {
	color: #606266;
}
.rainParamsInput .el-input__inner {
	width: 90px;
	background-color: #909399;
	font-size: 14px;
	font-weight: 800;
	color: rgb(0, 255, 255);
	line-height: 40px;
}
.time {
	color: azure;
	display: inline-block;
	line-height: 20px;
	font-size: 20px;
}
.planeImageDiv {
	margin-top: 50px;
	height: 400px;
	width: 60%;
	background: no-repeat center top;
	background-size: contain;
}
.planeImage {
	border: 1px solid #a8a8aa;
	position: absolute;
	width: auto;
	left: 50px;
	top: 50px;
	z-index: -1;
}
.grid {
	position: absolute;
	width: auto;
	font-size: 12px;
	left: 150px;
	top: 51px;
}
.aside {
	position: absolute;
	width: 35px;
	height: 60px;
	top: 120px;
	background-color: rgba(209, 232, 245, 0.822);
	border: 1px solid #ffffff;
	text-align: center;
	color: #ffffff;
	font-size: 12px;
	line-height: 60px; //可以文字垂直居中
}
</style>
